<!--
 * @Author: wangming
 * @Date: 2021-07-12 14:36:25
 * @LastEditors: wangming
 * @LastEditTime: 2022-05-27 11:15:34
 * @FilePath: /hanma-application-designer-fed/src/pages/designUniversal/__components__/dynamicForm/rightModel/components/hmCustom.vue
 * @Description: 自定义组件
-->
<template>
  <el-form-item label="自定义渲染">
    <el-button
      @click="editJsx"
      type="primary"
      icon="el-icon-edit"
      plain
      size="mini"
      >代码编辑</el-button
    >
  </el-form-item>
</template>

<script>
import monacoEditor from "./hlTableList/monacoEditor/index.js";
import basicmixins from "./basicmixins";
const template = `/**
 * 
 * @param {*} h 系统预留字段
 * @param {*} {context:页面工具类对象,vm:{createData,state,setValue,value} }  
 * 例: vm.createData({a:1})  声明一个双向绑定对象  赋值给state  
 * 例: vm.state.a  输出属性 a 可以在视图双向绑定
 * 例: vm.setValue(value)  可为自定义组件设置输出的值 字段是组件绑定的数据字段 参数：value 自定义任意值 
 * 例: vm.value  获取自定义组件双向绑定的值 字段是组件绑定的数据字段 参数：value 自定义任意值
 * @param {*} rootScope  页面公共事件对象
 * @returns 
 */
function render(h, { context,vm },rootScope) {
  return <div>自定义代码</div>
}`;
export default {
  mixins: [basicmixins],
  data() {
    return {};
  },
  methods: {
    editJsx() {
      let jsx = this.value.__config.renderJsx || template;
      monacoEditor.showEdit(decodeURIComponent(jsx)).then((res) => {
        this.value.__config.renderJsx = encodeURIComponent(res);
      });
    },
  },
};
</script>

<style scoped lang="scss">
</style>
